<template>
  <el-table
      :data="tableData"
      height="540"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column prop="avatar" label="头像" width="180">
      <template slot-scope="scope">
        <img :src="scope.row.avatar" alt="avatar" style="width: 50px; height: 50px;border-radius: 10px">
      </template>
    </el-table-column>
    <el-table-column
        prop="userName"
        label="用户名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="password"
        label="密码"
        width="180">
    </el-table-column>
    <el-table-column
        prop="phonenumber"
        label="手机号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱"
        width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.userList()
  },
  methods: {
    userList() {
      this.$axios.get('')
          .then(e => {
            console.log(e)
            this.tableData = e.data.data
          })
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '删除用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`http://localhost:3333/api/user/deleteuser/${row.id}`).then(response => {
          if (response.data.code === 200) {
            this.tableData.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message.error(response.data.msg || '删除用户失败');
          }
        }).catch(error => {
          console.log(error)
          this.$message.error(error.message || '删除用户失败');
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>